<template>
  <div class="topnav">
    <div class="titleList">
      <tr style="cursor: pointer">
        <th
          v-for="item in list"
          :key="item.label"
          @click="checkNav(item.label)"
          :class="{ active: $route.path.includes(item.name) }"
        >
          <span>{{ item.label }}</span>
          <!-- 如果是item.name === homd(首页)的时候就不显示小叉号 -->
          <i
            class="el-icon-close"
            @click="closeNav(item.label)"
            v-if="item.name != 'home'"
          ></i>
        </th>
      </tr>
    </div>

    <!-- 这是顶部最右侧的叉号小图标 -->
    <i class="el-icon-close" @click="clearTag"></i>
    <!-- <div class="topnav_2">
      <el-badge class="top_pic1" :value="badge" :hidden="!badge">
        <i class="el-icon-bell" @click="goToAllocation"></i>
      </el-badge>
      <p>{{ user }}</p>
      <el-button @click="open" class="top_button" type="primary"
        >开通服务</el-button
      >
      <el-button @click="logOut" class="top_button" type="danger"
        >/login/logOut</el-button
      >
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      badge: 0,
      list: this.$store.state.navList, // 把vuex中的vavList数组取出来，放在这个list中
      // user: document.cookie.match(RegExp("jxUser" + "=([^;]+)"))[1],
      user: null
    }
  },
  watch: {
    list(a, b) {
      if (a == []) {
        this.goHome()
      }
    }
  },
  methods: {
    closeNav(str) {
      // 点击top顶部的小叉号图标的时候，触发的函数
      this.$store.commit('minusNav', str)
      // 这个list就是vuex中的nvaList
      let aa = this.list[this.list.length - 1].label
      this.checkNav(aa)
      event.stopPropagation()
    },
    checkNav(str) {
      // console.log(str) // 这个自定义事件，在父组件App.vue上面监听
      this.$emit('changeNav', str)
    },
    goHome() {
      this.$router.push('/home')
    },

    clearTag() {
      // console.log(this.$route.path.split("/")[2]); // 拿到的是所在当前页面的路径，并且传给vuex遍历
      //   this.$route.path.split("/")[2] 字符串通过/分割成数组之后，取下标为2的元素项
      this.$store.commit('clearTag', this.$route.path.split('/')[2])
    }
  },
  created() {
    let userVal = document.cookie.match(RegExp('jxUser' + '=([^;]+)'))
    this.user = userVal ? userVal[1] : null
  }
}
</script>

<style scoped>
.topnav {
  padding-right: 4vh;
  position: relative;
  /* background-color: cadetblue; */
}
.titleList {
  height: 4vh;
  display: flex;
  flex-wrap: nowrap;
  /* overflow-y: hidden; */
  overflow: hidden;
}
.topnav > i {
  width: 4vh;
  line-height: 4vh;
  position: absolute;
  right: 0;
  top: 0;
  padding-left: 1vh;
}

th {
  line-height: 4vh;
  border-right: 2px solid #f4f4f4;
  font-size: 15px;
  color: #222222;
  padding: 0 10px;
  overflow: hidden;
}
th.active {
  background-color: rgb(217, 236, 255);
}
th > span {
  overflow: hidden;
}
th > i {
  line-height: 30px;
  width: 30px;
  height: 30px;
  font-size: 16px;
}
th > i:hover {
  color: #409eff;
}
</style>

<style>
.topnav .el-icon-bell {
  color: #666;
  font-size: 28px;
  position: relative;
  left: -10px;
}
.topnav .el-badge__content.is-fixed {
  right: 20px;
}
</style>
